<template>
	<view class="container">
		<!-- 顶部状态栏及搜索框 -->
		<view class="header-area">
			<view class="search-bar-normal">
				<view class="location-info" @click="getLocation">
					<image src="/static/icon/location.png" class="location-icon"></image>
					<text class="location-text">{{location}}</text>
				</view>
				<image src="/static/search-icon.png" class="search-icon-img"></image>
				<input class="search-input" placeholder="搜索门店名称或地址" />
			</view>
		</view>

		<!-- 主内容区域 -->
		<view class="main-content-adjusted">
			<!-- 轮播图部分 -->
			<swiper class="main-carousel" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="500">
				<swiper-item>
					<view class="swiper-item-content">轮播图内容 1</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item-content">轮播图内容 2</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item-content">轮播图内容 3</view>
				</swiper-item>
			</swiper>

			<!-- 导航网格 -->
			<view class="nav-grid">
				<view class="nav-grid-item" @click="navigateToServiceAppointments">
					<image src="/static/placeholder-icon.png" class="nav-grid-icon"></image>
					<text class="nav-grid-text">服务预约</text>
				</view>
				<view class="nav-grid-item">
					<image src="/static/placeholder-icon.png" class="nav-grid-icon"></image>
					<text class="nav-grid-text">套餐服务</text>
				</view>
				<view class="nav-grid-item" @click="navigateToServiceRecords">
					<image src="/static/placeholder-icon.png" class="nav-grid-icon"></image>
					<text class="nav-grid-text">服务记录</text>
				</view>
				<view class="nav-grid-item">
					<image src="/static/placeholder-icon.png" class="nav-grid-icon"></image>
					<text class="nav-grid-text">车品商城</text>
				</view>
			</view>

			<!-- 功能卡片区 -->
			<view class="feature-cards-section">
				<view class="card-large blue-gradient-card">
					<view class="card-title">车辆绑定</view>
					<view class="card-content">
						<view>车牌号: 未绑定</view>
						<view>车型: 未绑定</view>
					</view>
					<button class="card-button">绑定</button>
				</view>

				<view class="card-small-group">
					<view class="card-small red-promo-card">
						<view class="card-title">全民推广</view>
						<view class="card-content-small">
							<view>邀请好友注册</view>
							<view>双方各得30元洗车券</view>
						</view>
						<button class="card-button-small">立即参与</button>
					</view>

					<view class="card-small blue-member-card">
						<view class="card-title">会员享免费</view>
						<view class="card-content-small">
							<view>会员服务-洗车无忧</view>
						</view>
						<button class="card-button-small">立即进入</button>
					</view>
				</view>
			</view>

			<!-- 限时秒杀区域 -->
			<view class="seckill-section">
				<view class="section-header">
					<view class="header-left">
						<view class="red-bar"></view>
						<text class="section-title">限时秒杀</text>
					</view>
					<view class="countdown-timer">
						<text class="time-label">18点场</text>
						<text class="time-box">00</text>:<text class="time-box">18</text>:<text
							class="time-box">04</text>
					</view>
				</view>
				<text class="seckill-description">早10晚8，限时抢购</text>

				<view class="product-list">
					<view class="product-item sold-out">
						<view class="product-image-placeholder"></view>
						<view class="sold-out-badge">已售罄</view>
						<text class="product-name">商品名称</text>
						<view class="price-info">
							<text class="current-price">¥0.00</text>
							<text class="original-price">省¥120</text>
						</view>
					</view>
					<view class="product-item sold-out">
						<view class="product-image-placeholder"></view>
						<view class="sold-out-badge">已售罄</view>
						<text class="product-name">商品名称</text>
						<view class="price-info">
							<text class="current-price">¥0.00</text>
							<text class="original-price">省¥50</text>
						</view>
					</view>
				</view>
				<view class="view-all-button">查看全部</view>
			</view>

			<!-- 附近门店区域 -->
			<view class="nearby-stores-section">
				<view class="section-header">
					<text class="section-title">附近门店</text>
					<text class="more-button" @click="navigateToMoreStores">更多</text>
				</view>
				<view class="store-item">
					<image src="/static/store-thumbnail.png" class="store-thumbnail"></image>
					<view class="store-info-content">
						<text class="store-name">双井洗车中心</text>
						<view class="store-details">
							<text class="store-rating">⭐ 4.8</text>
							<text class="store-distance">43.7km</text>
						</view>
						<text class="store-address">北京市北京市朝阳区双井桥东南角25号</text>
					</view>
				</view>
			</view>

			<view class="bottom-tip">
				-- 已经到底啦 --
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getCurrentLocation,
		checkLocationPermission
	} from '@/utils/location.js';

	export default {
		data() {
			return {
				location: '定位中...'
			}
		},
		onLoad() {
			this.getLocation();
		},
		methods: {
			// 获取位置信息
			async getLocation() {
				try {
					await checkLocationPermission();
					const locationInfo = await getCurrentLocation();
					console.log('获取到的经纬度:', locationInfo);

					// 使用腾讯地图逆地理编码接口获取地址信息
					wx.request({
						url: `https://apis.map.qq.com/ws/geocoder/v1/`,
						data: {
							key: 'T6MBZ-FMBYB-DMEUE-JOM4Z-ZJCH6-4WFJX', // **请替换为您的腾讯地图Key**
							location: `${locationInfo.latitude},${locationInfo.longitude}`
						},
						success: (res) => {
							console.log('腾讯地图返回数据:', res.data);
							if (res.data.status === 0) {
								this.location = res.data.result.address_component.city;
							} else {
								console.error('腾讯地图返回错误:', res.data);
								this.location = '定位失败';
							}
						},
						fail: (error) => {
							console.error('腾讯地图请求失败:', error);
							this.location = '定位失败';
						}
					});
				} catch (error) {
					console.error('定位失败:', error);
					this.location = '定位失败';
					wx.showToast({
						title: error.message || '获取位置信息失败',
						icon: 'none',
						duration: 2000
					});
				}
			},
			// 服务预约
			navigateToServiceAppointments() {
				uni.navigateTo({
					url: '/pages/service/service-appointments/index'
				})
			},
			// 服务记录
			navigateToServiceRecords() {
				uni.navigateTo({
					url: '/pages/service/service-records/index'
				})
			},
			// 更多门店
			navigateToMoreStores() {
				uni.navigateTo({
					url: '/pages/stores/index'
				})
			},
		}
	}
</script>

<style scoped>
	.container {
		background-color: #f0f2f5;
		min-height: 100vh;
		display: flex;
		flex-direction: column;
	}

	.header-area {
		background-color: #fff;
		padding-top: var(--status-bar-height);
		/* 适配不同设备的顶部安全区域 */
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
		z-index: 101;
	}

	.status-bar-placeholder {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 40rpx;
		/* 模拟状态栏高度 */
		padding: 0 30rpx;
		font-size: 24rpx;
		color: #333;
	}

	.network-info text {
		margin-left: 10rpx;
	}

	.search-bar-normal {
		display: flex;
		align-items: center;
		width: 90%;
		height: 70rpx;
		background-color: #f0f2f5;
		border-radius: 35rpx;
		padding: 0 30rpx;
		margin: 20rpx auto;
	}

	.location-info {
		display: flex;
		align-items: center;
		margin-right: 20rpx;
	}

	.location-icon {
		width: 36rpx;
		height: 36rpx;
		margin-right: 10rpx;
	}

	.location-text {
		font-size: 28rpx;
		color: #333;
		white-space: nowrap;
	}

	.search-icon-img {
		width: 32rpx;
		height: 32rpx;
		margin-right: 15rpx;
	}

	.search-input {
		flex: 1;
		font-size: 26rpx;
		color: #333;
	}

	.main-content-adjusted {
		flex: 1;
		padding: 0 30rpx;
		overflow-y: auto;
	}

	.main-carousel {
		width: 100%;
		height: 320rpx;
		border-radius: 20rpx;
		overflow: hidden;
		margin-top: 30rpx;
		/* 调整顶部间距 */
		margin-bottom: 40rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
	}

	.swiper-item-content {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
		background-color: #e0e0e0;
		/* Placeholder color */
		color: #666;
		font-size: 32rpx;
	}

	.nav-grid {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 20rpx;
		margin-bottom: 40rpx;
	}

	.nav-grid-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 30rpx 0;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
	}

	.nav-grid-icon {
		width: 70rpx;
		height: 70rpx;
		margin-bottom: 10rpx;
		background-color: #ccc;
		/* Placeholder for icon */
		border-radius: 50%;
	}

	.nav-grid-text {
		font-size: 26rpx;
		color: #333;
	}

	.feature-cards-section {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		gap: 30rpx;
		margin-bottom: 40rpx;
	}

	.card-large {
		width: 100%;
		border-radius: 30rpx;
		padding: 40rpx;
		box-sizing: border-box;
		color: #fff;
		position: relative;
		overflow: hidden;
		box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.15);
	}

	.blue-gradient-card {
		background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
	}

	.card-small-group {
		display: flex;
		justify-content: space-between;
		width: 100%;
		gap: 30rpx;
	}

	.card-small {
		width: calc(50% - 15rpx);
		/* Account for gap */
		border-radius: 30rpx;
		padding: 30rpx;
		box-sizing: border-box;
		color: #fff;
		position: relative;
		overflow: hidden;
		box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.15);
	}

	.red-promo-card {
		background: linear-gradient(135deg, #ff6a00 0%, #ee0979 100%);
	}

	.blue-member-card {
		background: linear-gradient(135deg, #2af598 0%, #009efd 100%);
	}

	.card-title {
		font-size: 38rpx;
		font-weight: bold;
		margin-bottom: 15rpx;
	}

	.card-content {
		font-size: 28rpx;
		margin-bottom: 30rpx;
		line-height: 1.6;
	}

	.card-content-small {
		font-size: 24rpx;
		margin-bottom: 20rpx;
		line-height: 1.5;
	}

	.card-button,
	.card-button-small {
		background-color: rgba(255, 255, 255, 0.9);
		color: #333;
		font-size: 28rpx;
		border-radius: 40rpx;
		padding: 15rpx 30rpx;
		position: absolute;
		bottom: 30rpx;
		right: 30rpx;
		line-height: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		min-width: 180rpx;
	}

	.card-button-small {
		font-size: 24rpx;
		padding: 10rpx 20rpx;
		min-width: 150rpx;
	}

	.seckill-section,
	.nearby-stores-section {
		background-color: #fff;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-bottom: 40rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
	}

	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.header-left {
		display: flex;
		align-items: center;
	}

	.red-bar {
		width: 8rpx;
		height: 36rpx;
		background-color: #D0021B;
		border-radius: 4rpx;
		margin-right: 15rpx;
	}

	.section-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
	}

	.countdown-timer {
		display: flex;
		align-items: center;
		background-color: #D0021B;
		color: #fff;
		border-radius: 10rpx;
		padding: 8rpx 15rpx;
	}

	.time-label {
		font-size: 24rpx;
		margin-right: 10rpx;
	}

	.time-box {
		background-color: #A90013;
		padding: 5rpx 10rpx;
		border-radius: 6rpx;
		font-size: 28rpx;
		font-weight: bold;
		margin: 0 5rpx;
	}

	.seckill-description {
		font-size: 26rpx;
		color: #999;
		margin-bottom: 30rpx;
	}

	.product-list {
		display: flex;
		justify-content: space-around;
		margin-bottom: 30rpx;
	}

	.product-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 45%;
		background-color: #f8f8f8;
		border-radius: 15rpx;
		padding: 20rpx;
		position: relative;
		overflow: hidden;
	}

	.product-image-placeholder {
		width: 150rpx;
		height: 150rpx;
		background-color: #e0e0e0;
		border-radius: 10rpx;
		margin-bottom: 15rpx;
	}

	.sold-out-badge {
		position: absolute;
		top: 10rpx;
		left: 10rpx;
		background-color: rgba(0, 0, 0, 0.6);
		color: #fff;
		font-size: 22rpx;
		padding: 5rpx 15rpx;
		border-radius: 5rpx;
		z-index: 10;
	}

	.product-name {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 10rpx;
	}

	.price-info {
		display: flex;
		align-items: baseline;
	}

	.current-price {
		font-size: 32rpx;
		color: #D0021B;
		font-weight: bold;
		margin-right: 10rpx;
	}

	.original-price {
		font-size: 24rpx;
		color: #999;
		text-decoration: line-through;
	}

	.view-all-button {
		font-size: 28rpx;
		color: #007bff;
		text-align: center;
		padding: 15rpx 0;
		border-top: 1rpx solid #eee;
	}

	.more-button {
		font-size: 26rpx;
		color: #999;
	}

	.store-item {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 20rpx 0;
		border-top: 1rpx solid #eee;
	}

	.store-thumbnail {
		width: 150rpx;
		height: 150rpx;
		border-radius: 10rpx;
		background-color: #e0e0e0;
		margin-right: 20rpx;
		flex-shrink: 0;
	}

	.store-info-content {
		display: flex;
		flex-direction: column;
		flex: 1;
	}

	.store-name {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 10rpx;
	}

	.store-details {
		display: flex;
		align-items: center;
		margin-bottom: 10rpx;
	}

	.store-rating {
		font-size: 28rpx;
		color: #f5a623;
		margin-right: 20rpx;
	}

	.store-distance {
		font-size: 28rpx;
		color: #666;
	}

	.store-address {
		font-size: 26rpx;
		color: #999;
		line-height: 1.4;
	}

	.bottom-tip {
		font-size: 28rpx;
		color: #999;
		text-align: center;
		margin-top: 40rpx;
		padding-bottom: 50rpx;
	}

	/* 底部导航栏样式 */
	.bottom-nav-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 120rpx;
		background-color: #fff;
		display: flex;
		justify-content: space-around;
		align-items: center;
		box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.05);
		z-index: 1000;
	}

	.nav-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		flex: 1;
		font-size: 24rpx;
		color: #666;
	}

	.nav-item.active {
		color: #007bff;
		/* 活跃状态颜色 */
	}

	.nav-icon {
		width: 50rpx;
		height: 50rpx;
		margin-bottom: 8rpx;
	}

	.nav-text {
		font-size: 24rpx;
	}
</style>